<template>
  <div>
    <layout-main>
      <template #left>
        <echart-main class="echartMain">
          <template #title> 三务公开 </template>
          <template #echart>
            <swgk-item @infoClick="infoClick" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 人口信息 </template>
          <template #echart>
            <div class="rk_tops">
              <div class="rk_top">
                <echart :options="options1" />
              </div>
              <div class="rk_top">
                <echart :options="options2" />
              </div>
            </div>
            <div class="rk_tops">
              <echart :options="options3" />
            </div>
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 集体经济增长情况 </template>
          <template #echart>
            <echart :options="options4" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main class="echartMain">
          <template #title> 党政建设 </template>
          <template #echart>
            <party />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 土地概况 </template>
          <template #echart>
            <echart :options="options5" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 宅基地统计 </template>
          <template #echart>
            <echart :options="options6" />
          </template>
        </echart-main>
      </template>
      <template #bottom1>
        <echart-main class="bot">
          <template #title> 危房改造 </template>
          <template #echart>
            <echart :options="options7" />
          </template>
        </echart-main>
      </template>
      <template #bottom2>
        <echart-main class="bot">
          <template #title> 两不愁三保障 </template>
          <template #echart>
            <echart :options="options8" />
          </template>
        </echart-main>
      </template>
    </layout-main>
    <information v-if="infoShow" ref="infor" @closeInfo="closeInfo" />
    <!-- <slant-photo @openImg="openImg" @showvr="showvrClick"/> -->
    <people-info v-if="isImg" :imgUrl="imgUrl" @closeImg="closeImg"/>
    <div class="krpano" v-if="showVr">
      <div class="close" @click="closeVrClick">x</div>
      <vtour :xmlPath="xml"/>
    </div>
  </div>
</template>

<script>
import EchartMain from "components/content/echartMain/EchartMain.vue";
import LayoutMain from "components/content/layoutMain/LayoutMain.vue";
import Echart from "components/common/echart/Echart.vue";
import SwgkItem from "./item/SwgkItem.vue";
import Information from "./item/Information.vue";
import SlantPhoto from './3D/SlantPhoto.vue';
import Party from 'components/content/item/Party.vue';
import PeopleInfo from 'components/content/item/PeopleInfo.vue';
import Vtour from 'components/content/vtour/Vtour.vue';

import {
  echarts1,
  echarts2,
  echarts3,
  echarts4,
  echarts5,
  echarts6,
  echarts8,
} from "./echartjs/echarts-nc";
import {curUrl3} from 'util/prodUrl'
export default {
  components: { LayoutMain, EchartMain, Echart, SwgkItem, Information, SlantPhoto, Party, PeopleInfo, Vtour },
  data() {
    return {
      infoShow: false,
      options1: null,
      options2: null,
      options3: null,
      options4: null,
      options5: null,
      options6: null,
      options7: null,
      options8: null,
      swMain: null,
      isImg: false,
      imgUrl: '',
      showVr: false,
      xml: curUrl3 + "/pano/ksh/1vr/honghulu/1/krpano.xml"
    };
  },
  created() {
    this.echarts();
  },
  methods: {
    infoClick(id) {
      this.infoShow = true;
      this.$nextTick(function () {
        this.$refs.infor.showInfor(id);
      });
    },
    closeInfo() {
      this.infoShow = false;
    },
    closeImg() {
      this.isImg = false
    },
    openImg(n) {
      this.isImg = true
      this.imgUrl = n
    },
    showvrClick(xml) {
      this.showVr = true;
      this.xml = xml
    },
    closeVrClick() {
      this.showVr = false
    },
    echarts() {
      let manNum = 864;
      let wumanNum = 706;
      let man = ((manNum / (manNum + wumanNum)) * 100).toFixed(0)
      let wuman = ((wumanNum / (manNum + wumanNum)) * 100).toFixed(0)
      this.options1 = echarts1(man);
      this.options2 = echarts2(wuman);
      this.options3 = echarts3(
        ["重点人员", "女性人数", "男性人数", "总人数"],
        [59, 706, 864, 1570]
      );
      this.options4 = echarts4(
        [2015, 2016, 2017, 2018, 2019, 2020, 2021],
        [400, 110, 250, 150, 230, 300, 400]
      );
      this.options5 = echarts5([
        { name: "农用地", value: 8600 },
        { name: "建设用地", value: 6897.6 },
        { name: "未利用地", value: 42797.85 },
      ],'亩');
      this.options6 = echarts6([
        { name: "已建房", value: 834 },
        { name: "未建房", value: 1034 },
      ]);
      this.options7 = echarts5([
        { name: "已改造", value: 303 },
        { name: "未改造", value: 0 }
      ],'');
      this.options8 = echarts8(
        ["不愁吃", "不愁穿", "基本教育", "基本医疗", "基本住房"],
        [
          {
            name: "光伏",
            type: "bar",
            data: [100, 200, 300, 400, 500],
          },
          {
            name: "风力",
            type: "bar",
            data: [500, 400, 300, 200, 100],
          },
        ]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.echartMain {
  height: 33.3%;
}
.rk_tops {
  height: 50%;
  width: 100%;
  display: flex;

  .rk_top {
    width: 50%;
    height: 100%;
  }
}
.bot {
  height: 100%;
}
.krpano {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vh;
  z-index: 123111;
  .close {
    position: absolute;
    right: 8px;
    top: 5px;
    font-size: 60px;
    z-index: 123;
    line-height: 32px;
    color: #000;
  }
}
</style>